import { useState, useEffect } from 'react';
import Taro, { useLoad, useRouter } from '@tarojs/taro';
import { View, Text, Image, ScrollView } from '@tarojs/components';
import { AtTabs, AtTabsPane } from 'taro-ui';
import IconFont from '@/components/iconfont';
import './index.scss';

import "taro-ui/dist/style/components/nav-bar.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/tabs.scss";
import apiRequest from '@/service/apiRequest';


// const mockData = {
//     id: '3',
//     name: '柯基犬',
//     englishName: 'Welsh Corgi',
//     category: '狗狗',
//     origin: '英国威尔士',
//     lifespan: '12-15年',
//     size: '小型犬',
//     weight: '10-14kg',
//     height: '25-30cm',
//     coat: '双层被毛，外层粗硬，内层柔软',
//     colors: ['红色', '黑色', '三色'],
//     temperament: ['活泼', '聪明', '友善', '勇敢', '忠诚'], 
//     description: '柯基犬是一种小型犬，但性格活泼开朗，非常适合家庭饲养。它们聪明、易训练，对主人非常忠诚。柯基犬有两种类型：卡迪根威尔士柯基和彭布罗克威尔士柯基，后者更为常见。',
//     careNeeds: '中等',
//     exerciseNeeds: '高',
//     groomingNeeds: '中等',
//     healthIssues: ['髋关节发育不良', '眼部问题', '椎间盘疾病'],
//     images: [ 
//         'https://images.unsplash.com/photo-1612536057832-2ff7ead58194',
//         'https://images.unsplash.com/photo-1537151672256-6caf2e9f8c95',
//         'https://images.unsplash.com/photo-1583512603806-077998240c7a',
//         'https://images.unsplash.com/photo-1575425186775-b8de9a427e67'
//     ],
//     careGuide: {
//         feeding: '柯基犬容易发胖，应控制食量，每天喂食2-3次高质量狗粮。成年柯基每天的食量约为体重的2-3%。',
//         grooming: '柯基犬需要每周刷毛2-3次，脱毛季节需要每天刷毛。每3-4个月洗澡一次，定期修剪指甲和清洁耳朵。',
//         exercise: '尽管体型小，柯基犬精力充沛，需要每天至少30-60分钟的运动。散步、玩耍和简单的训练都是很好的活动方式。',
//         training: '柯基犬聪明且渴望取悦主人，训练相对容易。应从幼犬时期开始社交化训练，使用正面强化的方法效果最佳。',
//         health: '定期体检、疫苗接种和驱虫是保持柯基犬健康的基础。注意控制体重，避免跳跃等可能伤害脊椎的活动。'
//     }
// }

function PetBreedPage() {
    const router = useRouter();
    const { petVarietyId } = router.params;

    const [current, setCurrent] = useState(0);
    const [breedInfo, setBreedInfo] = useState<any>({});
    const [loading, setLoading] = useState(false);
    const [tip, setTip] = useState('');

    // 切换标签页
    const handleTabClick = (value) => {
        setCurrent(value);
    };

    // 饲养难度
    const starts = [
        {
            label: '低',
            value: 'low'
        },
        {
            label: '中等',
            value: 'medium'
        },
        {
            label: '高',
            value: 'high'
        }
    ];

    const requestTips = async () => {
        const { content } = await apiRequest.get("/api/commons/setting_tips", { tradeType: "PET_HEALTH_TIP" });
        if (content) {
            setTip(content);
        }
    }

    useEffect(() => {
        if (current === 2 && !tip) {
            requestTips();
        }
    }, [current])

    const requestPetdetails = async () => {
        let res = await apiRequest.get(`/api/pet_varieties/detail/${petVarietyId}`)
        if (res) {
            setBreedInfo(res);
        }
    }

    useLoad(() => {
        setLoading(true);
        requestPetdetails();
        setLoading(false);
    })

    return  loading ? (
        <View className='loading-container flex-c-c-c'>
            <View className='loading-content'>
                <Text>加载中...</Text>
            </View>
        </View>
    ) :
    (
        <View className='pet-breed-container'>
            {/* 宠物图片轮播 */}
            <ScrollView className='image-scroll' scrollX>
                <View className='image-container'>
                    {
                        breedInfo.images ? breedInfo.images.map((image, index) => (
                            <Image
                                key={index}
                                className='breed-image'
                                src={image}
                                mode='aspectFill'
                                webp
                            />
                        )) : null
                    }
                </View>
            </ScrollView>

            {/* 基本信息 */}
            <View className='breed-info-card'>
                <View className='breed-header'>
                    <View className='breed-title'>
                        <Text className='breed-name'>{breedInfo.name}</Text>
                        <Text className='breed-english'>{breedInfo.englishName}</Text>
                    </View>
                    <View className='breed-category-tag'>{breedInfo.petCategoryName}</View>
                </View>

                <View className='breed-description'>
                    {breedInfo.description}
                </View>

                <View className='breed-tags'>
                    {
                        breedInfo.temperament ? breedInfo.temperament.map((tag, index) => (
                            <View key={index} className='breed-tag'>{tag}</View>
                        )) : null
                    }
                </View>

                <View className='breed-stats'>
                    <View className='stat-item'>
                        <View className='stat-label'>体型</View>
                        <View className='stat-value'>{breedInfo.size}</View>
                    </View>
                    <View className='stat-item'>
                        <View className='stat-label'>寿命</View>
                        <View className='stat-value'>{breedInfo.lifespan}</View>
                    </View>
                    <View className='stat-item'>
                        <View className='stat-label'>产地</View>
                        <View className='stat-value'>{breedInfo.origin}</View>
                    </View>
                </View>
            </View>

            {/* 详细信息标签页 */}
            <AtTabs
                current={current}
                tabList={[
                    { title: '基本特征' },
                    { title: '饲养指南' },
                    { title: '健康护理' }
                ]}
                onClick={handleTabClick}
            >
                <AtTabsPane current={current} index={0}>
                    <View className='tab-content'>
                        <View className='info-section'>
                            <View className='info-title'>身体特征</View>
                            <View className='info-list'>
                                <View className='info-item'>
                                    <Text className='info-label'>体重</Text>
                                    <Text className='info-value'>{breedInfo.weight}</Text>
                                </View>
                                <View className='info-item'>
                                    <Text className='info-label'>身高</Text>
                                    <Text className='info-value'>{breedInfo.height}</Text>
                                </View>
                                <View className='info-item'>
                                    <Text className='info-label'>被毛</Text>
                                    <Text className='info-value'>{breedInfo.coat}</Text>
                                </View>
                                <View className='info-item'>
                                    <Text className='info-label'>颜色</Text>
                                    <Text className='info-value'>{breedInfo.colors && breedInfo.colors.join('、')}</Text>
                                </View>
                            </View>
                        </View>

                        <View className='info-section'>
                            <View className='info-title'>性格特点</View>
                            <View className='character-list'>
                                {
                                    breedInfo.temperament ? breedInfo.temperament.map((character, index) => (
                                        <View key={index} className='character-item'>
                                            <Text>{character}</Text>
                                        </View>
                                    )) : null
                                }
                            </View>
                        </View>

                        <View className='info-section'>
                            <View className='info-title-wrap flex-b-c'>
                                <Text className='info-title'>饲养难度</Text>
                                <View className='info-start-content flex-a-c'>
                                    {
                                        starts ? starts.map((start, index) => (
                                            <View key={index} className='flex-a-c starts-type'>
                                                <Text>{start.label}-</Text>
                                                <View className={`starts-type-box ${start.value}-l`}></View>
                                            </View>
                                        )) : null
                                    }
                                </View>
                            </View>
                            <View className='difficulty-list'>
                                <View className='difficulty-item'>
                                    <Text className='difficulty-label'>护理需求</Text>
                                    <View className='difficulty-stars'>
                                        <View className={`star ${breedInfo.careNeeds === '低' ? 'low' : breedInfo.careNeeds === '中等' ? 'medium' : 'high'}`}></View>
                                    </View>
                                </View>
                                <View className='difficulty-item'>
                                    <Text className='difficulty-label'>运动需求</Text>
                                    <View className='difficulty-stars'>
                                        <View className={`star ${breedInfo.exerciseNeeds === '低' ? 'low' : breedInfo.exerciseNeeds === '中等' ? 'medium' : 'high'}`}></View>
                                    </View>
                                </View>
                                <View className='difficulty-item'>
                                    <Text className='difficulty-label'>美容需求</Text>
                                    <View className='difficulty-stars'>
                                        <View className={`star ${breedInfo.groomingNeeds === '低' ? 'low' : breedInfo.groomingNeeds === '中等' ? 'medium' : 'high'}`}></View>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </AtTabsPane>

                <AtTabsPane current={current} index={1}>
                    <View className='tab-content'>
                        <View className='care-section'>
                            <View className='care-item'>
                                <View className='care-icon'>
                                    <IconFont name='pet-chongwuweiyang' size={50} />
                                </View>
                                <View className='care-content'>
                                    <View className='care-title'>喂食指南</View>
                                    <View className='care-desc'>{breedInfo.careGuide && breedInfo.careGuide.feeding}</View>
                                </View>
                            </View>

                            <View className='care-item'>
                                <View className='care-icon'>
                                    <IconFont name='pet-chongwumeirong' size={50} />
                                </View>
                                <View className='care-content'>
                                    <View className='care-title'>美容护理</View>
                                    <View className='care-desc'>{breedInfo.careGuide && breedInfo.careGuide.grooming}</View>
                                </View>
                            </View>

                            <View className='care-item'>
                                <View className='care-icon'>
                                    <IconFont name='pet-chongwuyundong' size={50} />
                                </View>
                                <View className='care-content'>
                                    <View className='care-title'>运动需求</View>
                                    <View className='care-desc'>{breedInfo.careGuide && breedInfo.careGuide.exercise}</View>
                                </View>
                            </View>

                            <View className='care-item'>
                                <View className='care-icon'>
                                    <IconFont name='pet-chongwuxunlian' size={50} />
                                </View>
                                <View className='care-content'>
                                    <View className='care-title'>训练方法</View>
                                    <View className='care-desc'>{breedInfo.careGuide && breedInfo.careGuide.training}</View>
                                </View>
                            </View>
                        </View>
                    </View>
                </AtTabsPane>

                <AtTabsPane current={current} index={2}>
                    <View className='tab-content'>
                        <View className='health-section'>
                            <View className='health-item'>
                                <View className='health-title'>常见健康问题</View>
                                <View className='health-list'>
                                    {
                                        breedInfo.healthIssues ? breedInfo.healthIssues.map((issue, index) => (
                                            <View key={index} className='health-issue'>
                                                <View className='issue-dot'></View>
                                                <Text className='issue-text'>{issue}</Text>
                                            </View>
                                        )) : null
                                    }
                                </View>
                            </View>

                            <View className='health-item'>
                                <View className='health-title'>健康护理建议</View>
                                <View className='health-desc'>{breedInfo.careGuide && breedInfo.careGuide.health}</View>
                            </View>

                            <View className='health-tips'>
                                <View className='tips-title'>
                                    <IconFont name='pet-jiankangtishi' size={40} />
                                    <Text>健康提示</Text>
                                </View>
                                <View className='tips-content'>
                                    { tip }
                                </View>
                            </View>
                        </View>
                    </View>
                </AtTabsPane>
            </AtTabs>
        </View>
    );
}

export default PetBreedPage;